<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>笔记摘选</title>
    <link rel="shortcut icon" href="../../res/logo_main.png" />
    <link href="../public.css" type="text/css" rel="stylesheet" />
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#4F46E5',
                        secondary: '#10B981',
                        dark: '#1F2937',
                        light: '#F9FAFB'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            },
            corePlugins: {
                preflight: false,
            }
        }
    </script>
    <link href="index.css" type="text/css" rel="stylesheet" />
</head>

<body>
    <!-- 通用导航栏 -->
    <nav id="main-nav">
        <!-- logo与标题部分 -->
        <div class="icon-title">
            <a href="../main_page/index.html"><img src="../../res/logo_main.png" height="35px" /></a>
            <a href="../main_page/index.html">
                <h1>个人学习成果展示</h1>
            </a>
        </div>

        <!-- 页面导航部分 -->
        <div class="nav-links">
            <div class="nav-link">
                <a href="../product_show_page/index.html">
                    <img src="../../res/product_icon.png" width="20px" />
                    <span>作品展示</span>
                </a>
                <div class="drop-menu">
                    <a href="../product_show_page/wpg_show.html">Windows进程守护工具</a>
                    <a href="../product_show_page/tomato_cube_show.html">《番茄魔方》时间管理工具</a>
                    <a href="../product_show_page/personal_blog_show.html">个人博客网站</a>
                </div>
            </div>
            <div class="nav-link">
                <a href="../notes_extract_page/index.html">
                    <img src="../../res/note_icon.png" width="20px" />
                    <span>笔记摘选</span>
                </a>
                <div class="drop-menu">
                    <a href="../notes_extract_page/html_note_page.html">HTML篇</a>
                    <a href="../notes_extract_page/css_note_page.html">CSS篇</a>
                    <a
                        href="../notes_extract_page/js_note_page.html">JavaScript篇&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
                </div>
            </div>
            <div class="nav-link">
                <a href="../info_links_page/index.html">
                    <img src="../../res/infomation_icon.png" width="20px" />
                    <span>资料链接</span>
                </a>
                <div class="drop-menu">
                    <a href="../info_links_page/c_and_cpp_info_page.html">C/C++</a>
                    <a
                        href="../info_links_page/python_info_page.html">Python&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
                    <a href="../info_links_page/web_info_page.html">Web</a>
                </div>
            </div>
            <div class="nav-link">
                <a href="../js_lab_page/index.html">
                    <img src="../../res/lab_lcon.png" width="20px" />
                    <span>JS实验室</span>
                </a>
                <div class="drop-menu">
                    <a
                        href="../js_lab_page/sort_demo_page.html">排序演示&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
                    <a href="../js_lab_page/shape_draw_page.html">图形绘制</a>
                    <a href="../js_lab_page/address_list_page.html">通讯录演示</a>
                </div>
            </div>
            <div class="nav-link">
                <a href="../CV_show_page/index.html">
                    <img src="../../res/cv_icon.png" width="20px" />
                    <span>简历查看</span>
                </a>
                <div class="drop-menu">
                    <a
                        href="../CV_show_page/online_view_page.html">在线查看&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
                    <a href="../CV_show_page/index.html">简历下载</a>
                    <a href="../CV_show_page/index.html">联系方式</a>
                </div>
            </div>
            <div class="nav-link">
                <a href="../admin_entrance_page/index.html" target="_blank">
                    <img src="../../res/admin_icon.png" width="20px" />
                    <span>管理员入口</span>
                </a>
            </div>
        </div>
        <!-- 时间显示部分 -->
        <div class="time-show">
            <p id="current-date"></p>
            <p id="current-time"></p>
        </div>
        <!-- 注册＆登录部分 -->
        <div class="register-login">
            <button id="registerBtn">注册</button>
            <span>丨</span>
            <button id="loginBtn">登录</button>
        </div>
    </nav>

    <!-- 主页主体部分 -->
    <section class="main-body">
        <!--Banner图 -->
        <div class="banner-box">
            <img src="../../res/banner (12).png" alt="banner图">
            <h1 class="slogan" id="typewriter" style="min-width: 900px;">Web笔记摘选</h1>
        </div>
        <div class="note-box">
            <div class="spread-card">
                <a href="html_note_page.html" class="card-main">
                    <img src="imgs/HTML5.png" alt="html5_icon" />
                    <div style="text-align: center;">
                        <h1>HTML篇</h1>
                        <p>HyperText Markup Language<br />超文本标记语言</p>
                    </div>
                    <p>点击查看笔记内容→</p>
                </a>
                <a href="html_note_page.html" class="card-side">
                    <div>
                        <p><strong>时间：</strong>2025-04-17</p>
                    </div>
                    <div>
                        <p><strong>分类：</strong>学习笔记 -> Web -> HTML</p>
                    </div>
                    <div>
                        <p><strong>标签：</strong><span>Web</span><span>HTML</span></p>
                    </div>
                    <div>
                        <p><strong>摘要：</strong>这篇笔记是关于HTML的基础知识总结，涵盖了HTML的概述、常用标签及其用法。主要内容包括：HTML的基本结构标签、多媒体标签、列表标签、超链接与锚点、表格的创建与分组、表单的组成与控件等。
                        </p>
                    </div>
                </a>
            </div>
            <div class="spread-card">
                <a href="css_note_page.html" class="card-main">
                    <img src="imgs/css3.png" alt="html5_icon" />
                    <div style="text-align: center;">
                        <h1>CSS篇</h1>
                        <p>Cascading Style Sheets<br />层叠样式表</p>
                    </div>
                    <p>点击查看笔记内容→</p>
                </a>
                <a href="css_note_page.html" class="card-side">
                    <div>
                        <p><strong>时间：</strong>2025-05-12</p>
                    </div>
                    <div>
                        <p><strong>分类：</strong>学习笔记 -> Web -> CSS</p>
                    </div>
                    <div>
                        <p><strong>标签：</strong><span>Web</span><span>CSS</span></p>
                    </div>
                    <div>
                        <p><strong>摘要：</strong>这篇笔记是关于CSS3的基础知识和应用总结，涵盖了CSS3的概述、基础语法、选择器、常用属性、布局方式以及动画效果。主要内容包括：CSS3的基本语法和引入方式；各类选择器的使用；文本、图像、背景、列表、表格、表单等常用属性的设置；盒子模型、浮动排版、定位排版、Flex布局和Grid布局等排版技术；响应式设计的实现方法；以及CSS3变形、过渡和动画效果的实现。
                        </p>
                    </div>
                </a>
            </div>
            <div class="spread-card">
                <a href="js_note_page.html" class="card-main">
                    <img src="imgs/js.png" alt="html5_icon" />
                    <div style="text-align: center;">
                        <h1>JS篇</h1>
                        <p>JavaScript<br />Java脚本</p>
                    </div>
                    <p>点击查看笔记内容→</p>
                </a>
                <a href="js_note_page.html" class="card-side">
                    <div>
                        <p><strong>时间：</strong>2025-06-07</p>
                    </div>
                    <div>
                        <p><strong>分类：</strong>学习笔记 -> Web -> JavaScript</p>
                    </div>
                    <div>
                        <p><strong>标签：</strong><span>Web</span><span>JavaScript</span></p>
                    </div>
                    <div>
                        <p><strong>摘要：</strong>这篇笔记是关于JavaScript的基础知识总结。主要内容包括：Jav基本语法(标识符、变量与数据类型、对象)，以及DOM、BOM、事件等内容。笔记尚未完成，但在持续更新中…
                        </p>
                    </div>
                </a>
            </div>
        </div>
    </section>

    <!-- 通用页脚 -->
    <footer class="main-footer">
        <!-- 页脚链接列表 -->
        <div class="footer-lists">
            <div class="footer-list">
                <dl>
                    <dt><a href="../product_show_page/index.html">作品展示</a></dt>
                    <dd><a href="../product_show_page/wpg_show.html">Windows进程守护工具</a></dd>
                    <dd><a href="../product_show_page/tomato_cube_show.html">《番茄魔方》时间管理工具</a></dd>
                    <dd><a href="../product_show_page/personal_blog_show.html">个人博客网站</a></dd>
                </dl>
            </div>
            <div class="footer-list">
                <dl>
                    <dt><a href="../notes_extract_page/index.html">笔记摘选</a></dt>
                    <dd><a href="../notes_extract_page/html_note_page.html">HTML篇</a></dd>
                    <dd><a href="../notes_extract_page/css_note_page.html">CSS篇</a></dd>
                    <dd><a href="../notes_extract_page/js_note_page.html">JavaScript篇</a></dd>
                </dl>
            </div>
            <div class="footer-list">
                <dl>
                    <dt><a href="../info_links_page/index.html">资料链接</a></dt>
                    <dd><a href="../info_links_page/c_and_cpp_info_page.html">C/C++</a></dd>
                    <dd><a href="../info_links_page/python_info_page.html">Python</a></dd>
                    <dd><a href="../info_links_page/web_info_page.html">Web</a></dd>
                </dl>
            </div>
            <div class="footer-list">
                <dl>
                    <dt><a href="../js_lab_page/index.html">JS实验室</a></dt>
                    <dd><a href="../js_lab_page/sort_demo_page.html">排序演示</a></dd>
                    <dd><a href="../js_lab_page/shape_draw_page.html">图形绘制</a></dd>
                    <dd><a href="../js_lab_page/address_list_page.html">通讯录演示</a></dd>
                </dl>
            </div>
            <div class="footer-list">
                <dl>
                    <dt><a href="../CV_show_page/index.html">简历查看</a></dt>
                    <dd><a href="../CV_show_page/online_view_page.html">在线查看</a></dd>
                    <dd><a href="../CV_show_page/index.html">简历下载</a></dd>
                    <dd><a href="../CV_show_page/index.html">联系方式</a></dd>
                </dl>
            </div>
        </div>
        <!-- 分割线 -->
        <div class="footer-separation"></div>
        <!-- 其他信息 -->
        <div class="other-info">
            <p style="margin-top: 0;">我的邮箱：h2892197119@foxmail.com</p>
            <span>友情链接：</span>
            <a href="https://blog.morely.top" class="friend-link" target="_blank"><img src="../../res/logo_main.png"
                    width="15px" style="margin:0px 5px 0px 5px;">陌离的个人博客</a>
            <p>本网站仅用于学习展示，部分素材取自网络；<br />如有侵权请联系本人进行删除。</p>
        </div>
    </footer>
    <!-- 版权信息 -->
    <div class="copyright-info">
        Copyright &copy;2025 个人学习成果展示网站
    </div>

    <script type="text/javascript" src="../login_register_window.js"></script>
    <script type="text/javascript" src="../public.js"></script>
</body>

</html>